[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { LEDDemo } from "@/led-indicator" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="led-indicator.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { cn } from "@/lib/utils" type Status = "online" | "offline" | "away" | "busy" interface LEDIndicatorProps { status?: Status size?: "sm" | "md" | "lg" pulse?: boolean className?: string } export default function LEDIndicator({ status = "offline", size = "md", pulse = true, className }: LEDIndicatorProps) { const [isOnline, setIsOnline] = useState(status === "online") // Demo toggle for preview purposes useEffect(() => { setIsOnline(status === "online") }, [status]) const sizeClasses = { sm: "w-2 h-2", md: "w-3 h-3", lg: "w-4 h-4", } const statusColors = { online: { core: "bg-green-500", inner: "bg-green-400", outer: "bg-green-500", }, offline: { core: "bg-gray-400", inner: "bg-gray-300", outer: "bg-gray-400", }, away: { core: "bg-amber-500", inner: "bg-amber-400", outer: "bg-amber-500", }, busy: { core: "bg-red-500", inner: "bg-red-400", outer: "bg-red-500", }, } return (

{/* Outer glow - largest and most diffused */}

{/* Middle glow layer */}

{/* Inner glow - closer to the LED */}

{/* The LED itself */}

{/* Bright center core of the LED */}

{/* Glass highlight effect */}

) } // Demo component to showcase the LED indicator export function LEDDemo() { const [status, setStatus] = useState("online") const toggleStatus = () => { const statuses: Status[] = ["online", "offline", "away", "busy"] const currentIndex = statuses.indexOf(status) const nextIndex = (currentIndex + 1) % statuses.length setStatus(statuses[nextIndex]) } return (

{status}

Small

Medium

Large

Online

Offline

Away

Busy

) }

About

Tags

Share

About

Tags

Share

More from marcodenic

More Templates Like This